<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>积木科技</title>
    <link rel="stylesheet" type="text/css" href="css/fullPage.css?v=2">
    <link rel="stylesheet" type="text/css" href="css/animate.css">
    <link rel="stylesheet" type="text/css" href="css/style.css?v=5">
    <link rel="stylesheet" type="text/css" href="fonts/iconfont.css?v=1">
</head>

<body>
    <div id="print">
        <audio id="Jaudio" style="display:none" src="mp3/keji.mp3" preload loop="loop"></audio>
        <audio id="music" src="mp3/6843.mp3" onplay="this.currentTime=0"></audio>
        <audio id="music2" src="mp3/6843.mp3" onplay="this.currentTime=0"></audio>
        <div class="page section2 current">
            <div id="shiming" class="contain current">
                <img class="animated bounceInLeft" src="img/shiming/shiming.png" alt="">
            </div>
            <div id="team" class="contain">
                <div id="noservive">
                    <img class="animated bounceInLeft" src="img/team/team.png" alt="">
                    <img class="animated bounceInDown anmationDelay5 howtoservice" src="img/team/howtoservice.png" alt="">
                </div>
                <div id="hasservice">
                    <img class="animated bounceInLeft" src="img/team/service.png" alt="">
                </div>
            </div>
            <div id="dreamers" class="contain">
                <img class="animated bounceInDown" src="img/dreamers/dreamers.png" alt="">
            </div>
            <div id="yuanjing" class="contain">
                <img class="animated bounceInDown" src="img/yuanjing/yuanjing.png" alt="">
            </div>
            <div id="case" class="contain animated bounceInLeft">
                <div id="wrap">
                    <div id="inner" class="clear">
                        <img src="img/case/case1.png" alt="">
                        <img src="img/case/case2.png" alt="">
                        <img src="img/case/case3.png" alt="">
                    </div>
                </div>
                <div id="left" class="arrow"><i class="icon iconfont icon-xiaoyuhao"></i></div>
                <div id="right" class="arrow"><i class="icon iconfont icon-dayu-gengduo"></i></div>
            </div>
            <img class="case" src="img/home/case.png" alt="">
            <img class="case" id="caseAcrive" src="img/case/case.png" style="display:none" alt="">
            <div id="public">
                <div class="shiming"></div>
                <div class="team"></div>
                <div class="dreamers"></div>
                <div class="yuanjing"></div>
            </div>
        </div>
    </div>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
    <!-- <script src="js/script.js?v=8" charset="utf-8"></script> -->
    <script src="js/touch.js?v=88" charset="utf-8"></script>
    <script type="text/javascript">
        var mql = window.matchMedia('(orientation: portrait)');
        console.log(mql);
        var width = document.documentElement.clientWidth;
        var height = document.documentElement.clientHeight;
        console.log(width,height);
        function handleOrientationChange(mql) {
            if (mql.matches) {
                console.log('竖屏'); // 竖屏
                $('body').css({
                    'background': 'url(img/case/bg2.png)',
                    'background-size': '100% 100%',
                });
            } else {
                console.log('横屏'); // 横屏
                $('body').css({
                    'background': 'url(img/case/bg.jpg)',
                    'background-size': '100% 100%',
                });
            }
        }
        // 输出当前屏幕模式
        handleOrientationChange(mql);
        // 监听屏幕模式变化
        mql.addListener(handleOrientationChange);
    </script>
    <script type="text/javascript">
        function audioAutoPlay(id) {
            var audio = document.getElementById(id),
                play = function() {
                    audio.play();
                    document.removeEventListener("touchstart", play, false);
                };
            audio.play();
            document.addEventListener("WeixinJSBridgeReady", function() { //微信
                play();
            }, false);
            document.addEventListener("touchstart", play, false);
        };
        audioAutoPlay('Jaudio');
    </script>
    <script type="text/javascript">
        var jimuArr = ['shiming', "team", "dreamers", "yuanjing", "case"];
        for (var i = 0; i < jimuArr.length; i++) {
            $('.' + jimuArr[i]).on('touchend', function() {
                document.getElementById('Jaudio').pause(); //++
                var selector = $(this).attr('class');
                if (selector == 'case') {
                    $('.case').hide();
                    $('#caseAcrive').show();
                    initCase();
                } else {
                    $('.case').show();
                    $('#caseAcrive').hide();
                }
                if (selector == 'team') {
                    $('#noservive').show();
                    $('#hasservice').hide();
                }
                // 播放音乐
                $('#music')[0].play();
                // 切换背景图片
                $('.section2').css({
                        'background': 'url(img/' + selector + '/bg.jpg)',
                        'background-size': '100% 100%'
                    });
                    // 显示隐藏不同的状态
                $('.section2 .contain').removeClass('current');
                $('#' + selector).addClass('current');
            })
        }
        $('.howtoservice').click(function() {
            $('#music')[0].play();
            $('#noservive').hide();
            $('#hasservice').show();
        })
    </script>
    <script type="text/javascript" src='http://res.wx.qq.com/open/js/jweixin-1.0.0.js'></script>
    <script>
        wx.config({
            debug: false,
            appId: "${config.appId}",
            timestamp: "${config.timestamp}",
            nonceStr: "${config.nonceStr}",
            signature: "${config.signature}",
            jsApiList: [
                'onMenuShareTimeline', 'onMenuShareAppMessage'
            ]
        });
        wx.ready(function() {
            wx.onMenuShareTimeline({
                title: '积木科技', // 分享标题
                link: "${proUrl}/weixin/share", // 分享链接
                imgUrl: "${proUrl}/assets/blue/images/logo/logo3.png", // 分享图标
                success: function() {},
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
            wx.onMenuShareAppMessage({
                title: '积木科技', // 分享标题
                desc: '积木科技宣传书', // 分享描述
                link: "${proUrl}/weixin/share", // 分享链接
                imgUrl: "${proUrl}/assets/blue/images/logo/logo3.png", // 分享图标
                type: '', // 分享类型,music、video或link，不填默认为link
                dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                success: function() {
                    // 用户确认分享后执行的回调函数
                },
                cancel: function() {
                    // 用户取消分享后执行的回调函数
                }
            });
        });
    </script>

</body>

</html>
